<template>
  <div class="weather">
    <Title :title="today" />
    <div class="title-con">
      <iframe
        v-if="tqsrc !== ''"
        id="fram_box"
        ref="fram_box"
        scrolling="no"
        frameborder="0"
        allowtransparency="true"
        :src="tqsrc"
        @load="load"
      ></iframe>
      <!-- `https://i.tianqi.com?c=code&id=82&color=%23FFFFFF&icon=1&site=13&py=${address}` -->
      <!-- <iframe allowtransparency="true" frameborder="0" width="142" height="280" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=2&t=1&v=1&d=3&bd=1&k=ffffff&f=ffffff&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=142&h=280&align=center"></iframe> -->
      <!-- <iframe scrolling="no" frameborder="0" allowtransparency="true" :src="`https://i.tianqi.com?c=code&id=55&color=%23FFFFFF&icon=1&py=${address}&site=12`"></iframe> -->
      <!-- <iframe scrolling="no" frameborder="0" allowtransparency="true" :src="`https://i.tianqi.com?c=code&id=40&color=%23FFFFFF&icon=1&&py=${address}&site=12`"></iframe> -->
    </div>
    <img
      src="~@/assets/conservation-model/lin1.png"
      class="bottom-img"
      alt=""
    />
  </div>
</template>

<script>
import Title from "@/components/Title/index";
import nowuserpagereq from "@/api/user/index";
import moment from "moment";

export default {
  components: { Title },
  data() {
    return { today: "",
      address: 'wuxingqu',
      tqsrc: ''
    };
  },
  mounted() {
    this.getTqsrc()
    this.today = moment(new Date()).format("YYYY-MM-DD HH:MM:SS");
    if (sessionStorage.getItem("organizationName") && sessionStorage.getItem("organizationName") === '佳莓农业') {
      this.address = "pinghu"
    }
  },
  methods: {

    async getTqsrc() {
      this.load()
      let batres = await nowuserpagereq.getBigScreen(sessionStorage.organizationNo)
      let data = batres.data
      if (data[0].pinyin) {
        this.tqsrc = `https://i.tianqi.com?c=code&id=95&color=%23FFFFFF&icon=1&&site=12&py=${data[0].pinyin}&num=1`
      } else {
        this.tqsrc = "https://i.tianqi.com?c=code&id=95&color=%23FFFFFF&icon=1&site=12&num=1"
      }
    },

    // 在它加载完成后，执行下面的方法
    load() {
      console.log('loaded')
      this.activateTheme("light");
    },

    // 这里我们封装了一个activateTheme方法，方便后边复用，作用是修改iframe内部的主题颜色
    activateTheme(theme) {
      var iframe = document.getElementById("fram_box");
      console.log(iframe, this.$refs.fram_box)
      if (iframe && iframe.contentWindow) {
        console.log(iframe.contentWindow.postMessage(theme, "*"))
        iframe.contentWindow.postMessage(theme, "*");
      }
    }

  }
};
</script>

<style lang="scss" scoped>
.weather {
  height: 100%;
  width: 100%;
  position: relative;
  .bottom-img {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
  }
}
.title-con {
  > iframe {
    padding: 0 15px 0 10px;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 99;
  }
}
</style>
